import React, { Component } from 'react'
import Bscroll from 'better-scroll'
import { Scroll as ScrollMain } from './styled'

export default class Scroll extends Component {

    componentDidMount () {
        // 横向滚动
        const main = document.querySelector('.main-scroll')

        new Bscroll(main , {
            scrollX: true,
            click: false,
            scrollY: false,
        })
    }
    render() {
        return (
            <ScrollMain className="main-scroll">
                <div className="main">
                    {
                        this.props.note && this.props.note.list.splice(0,8).map(item => {
                            return(
                                <div className="item" key={item.id}>
                                    <div className="let">
                                        <div className="let-title">
                                            <div>
                                                <img src={item.posterAvatar} alt=""/>
                                                <span className="name">{item.posterName}</span>
                                            </div>
                                            <span className="level">
                                                <img src="" alt=""/>
                                            </span>
                                        </div>
                                        <div className="word">{item.content}</div>
                                    </div>
                                    {
                                        // 当值为 underfined 或者 null 时才不渲染
                                        item.picList[0] ? (<div className="pic">
                                            <img src={item.picList[0]} alt=""/>
                                        </div>) : null
                                    }
                                </div>
                            )
                        })
                    }
                </div>
            </ScrollMain>  
        )
    }
}
